<template>
  <div class="edit">
    <div class="editContent">
      <el-form
        ref="form"
        :model="editFrom"
        label-width="60px"
        label-position="left"
      >
        <el-row class="editBoxRow">
          <el-col :span="12">
            <el-form-item :label="translationData.date + '：'">
              <el-input
                v-model="editFrom.date"
                size="small"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="translationData.name + '：'">
              <el-input
                v-model="editFrom.name"
                size="small"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="translationData.address + '：'">
              <el-input
                v-model="editFrom.address"
                size="small"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer editFooter">
      <el-button size="small" @click="cancelEdit">取 消</el-button>
      <el-button
        size="small"
        type="primary"
        :loading="loading"
        @click="confirmEdit"
      >
        确 定
      </el-button>
    </span>
  </div>
</template>

<script>
import translation from './translation.json'

export default {
  name: 'Edit',
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      translationData: translation, // 翻译文件数据
      editFrom: {},
      loading: false
    }
  },
  watch: {
    data: {
      handler(newVal, oldVal) {
        this.editFrom = { ...newVal }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 取消编辑
    cancelEdit() {
      this.$emit('cancelEdit')
    },

    // 确定编辑
    confirmEdit() {
      console.log('编辑的数据：', this.editFrom)
      this.loading = true
      setTimeout(() => {
        this.loading = false
        this.$emit('confirmEdit')
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/table.scss';
</style>
